package com.example.composestudy.ui.animated

import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.composestudy.ui.widget.MyTopAppBar

@Composable
fun AnimateXPage(onBack: () -> Unit) {
    Scaffold(topBar = { MyTopAppBar(title = "animate * AsState 系列") { onBack.invoke() } }) { innerPadding ->
        LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .padding(top = innerPadding.calculateTopPadding(), start = 10.dp, end = 10.dp)
        ) {
            item {
                Demo_Description()
            }
            item {
                Demo_animateColorAsState()
            }
            item {
                Demo_animateFloatAsState()
            }
            item {
                Demo_animateDpAsState()
            }
        }
    }
}

@Composable
private fun Demo_Description() {
    val description =
        "知识点：\nAnimationSpec 是一个描述动画如何进行的规格，它定义了动画的持续时间、插值器、延迟等属性。例如，spring、tween、repeatable 和 infiniteRepeatable 都是 AnimationSpec 的实现。" +
                "\n1、Tween：这是一种基本的动画类型，可以定义动画的持续时间、延迟和插值器, 如：animationSpec = tween(durationMillis = 1000)" +
                "\n2、Spring：这是一种基于物理的动画类型，可以定义弹簧的刚度、阻尼比、可见性阈值等，如： animationSpec = spring(stiffness = Spring.StiffnessLow))，这将创建一个弹簧动画，弹簧的刚度较低" +
                "\n3、Repeatable：这种动画可以重复执行。可以定义重复次数、重复的动画规格和是否反向播放。\n" +
                "val color by animateColorAsState(targetColor, animationSpec = repeatable(\n" +
                "    iterations = AnimationConstants.Infinite,\n" +
                "    animation = tween(500),\n" +
                "    repeatMode = RepeatMode.Reverse\n" +
                "))\n这将创建一个无限重复的动画，每次动画持续 500 毫秒，并在每次重复时反向播放。"
    Text(text = description, fontSize = 12.sp, lineHeight = 20.sp)
}


@Composable
private fun Demo_animateColorAsState() {
    var visible by remember {
        mutableStateOf(true)
    }

    val animatedColor by animateColorAsState(
        targetValue = if (visible) Color.Green else Color.Blue,
        animationSpec = tween(durationMillis = 1000),
        label = ""
    )

    Column {
        Text(text = "1、animateColorAsState 示例", modifier = Modifier.padding(vertical = 10.dp))
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(100.dp)
                .background(Color.Green)
                .drawBehind {
                    drawRect(animatedColor)
                }
        )
        Spacer(modifier = Modifier.height(10.dp))
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(100.dp)
                .background(Color.Blue)
                .clickable {
                    visible = !visible
                }, contentAlignment = Alignment.Center
        ) {
            Text(
                text = "点击我改变绿色模块背景色",
                color = Color.White
            )
        }
    }
}

@Composable
private fun Demo_animateFloatAsState() {
    var visible by remember {
        mutableStateOf(true)
    }

    val animatedAlpha by animateFloatAsState(
        targetValue = if (visible) 1.0f else 0f,
        animationSpec = tween(1000),
        label = ""
    )

    Column {
        Text(text = "2、animateFloatAsState 示例", modifier = Modifier.padding(vertical = 10.dp))
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(100.dp)
                .background(Color.Green.copy(alpha = animatedAlpha))
        )
        Spacer(modifier = Modifier.height(10.dp))
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(100.dp)
                .background(Color.Blue)
                .clickable {
                    visible = !visible
                }, contentAlignment = Alignment.Center
        ) {
            Column {
                Text(
                    text = "点击我查看绿色模块背景色透明度变化",
                    color = Color.White,
                    textAlign = TextAlign.Center
                )
                Text(
                    text = "注意：更改 alpha 时需要注意，可组合项仍会保留在组合中，并且将继续占用其布局的空间",
                    color = Color.White.copy(alpha = 0.8f),
                    fontSize = 12.sp,
                    lineHeight = 16.sp
                )
            }
        }
    }
}

@Composable
private fun Demo_animateDpAsState() {
    var expand by remember {
        mutableStateOf(false)
    }

    val animatedHeight by animateDpAsState(
        targetValue = if (expand) 200.dp else 100.dp,
        animationSpec = tween(1000),
        label = ""
    )

    Column {
        Text(text = "3、animateDpAsState 示例", modifier = Modifier.padding(vertical = 10.dp))
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(animatedHeight)
                .background(Color.Green)
        )
        Spacer(modifier = Modifier.height(10.dp))
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(100.dp)
                .background(Color.Blue)
                .clickable {
                    expand = !expand
                }, contentAlignment = Alignment.Center
        ) {
            Text(
                text = "点击我查看绿色模块高度大小变化",
                color = Color.White,
                textAlign = TextAlign.Center
            )
        }
    }
}